<template>
	<view class="content" v-if="info">
		<view class="xq-box" style="padding: 20rpx 30rpx;display: flex;">
			<image class="goods-image" :src="info.logo_image" mode=""></image>
			<view class="goods-xq">
				<text class="goods-title">{{info.name}}</text>
				<!-- <text class="goods-des u-line-2">XXXXXXXXXXXXX</text> -->
				<text class="goods-price">维修费：¥{{info.price}}</text>
			</view>
		</view>
		<view class="xq-box">
			<view class="xq-title">
				<text>提交时间：{{info.createtime}}</text>
				<text class="type" style="color: #0055B0;">{{wx_status_name}}</text>
				<!-- <text class="type" v-if="info.repair_status == -1">待派单</text>
				<text class="type" style="color: #0055B0;" v-if="info.repair_status == 0">维修中</text>
				<text class="type" style="color: #E60012;" v-if="info.repair_status == 1">待确认</text>
				<text class="type" v-if="info.repair_status == 2">无法维修</text>
				<text class="type" style="color: #7C7C7C;" v-if="info.repair_status == 3">已完成</text> -->
			</view>
			<view class="xq-nr">
				<view class="" style="color: #333;font-size: 36rpx;font-weight: bold;">报修类目：{{info.name}}</view>
				<view>
					维修地点：{{info.report}}
				</view>
				<view>
					维修时间：<text style="color: #E60012;">截止{{info.repair_date}}</text>
				</view>
				<view>
					报修说明：{{info.report_message}}
				</view>
				<view class="">
					报修图片：
				</view>
				<view>
					<u-upload ref="uUpload" :deletable="false" :show-progress="false" width="518rpx" height="684rpx"
						:max-count="fileList.length" :file-list="fileList"></u-upload>
				</view>
			</view>
			<view class="xq-btn">
				<view class="title">报修信息</view>
				<view>姓名：{{info.user_name}}</view>
				<view>电话：{{info.user_phone}}</view>
			</view>
		</view>
		<view class="xq-box" style="margin-bottom: 60rpx;padding-top: 40rpx;" v-if="wx_status>0">
			<view class="title" style="padding-left: 20rpx;margin-bottom: 0;">服务商信息</view>
			<view class="xq-nr">
				<view>单位：{{info.company_name}}</view>
				<view>联系人：{{info.service_name}}</view>
				<view>电话：{{info.service_phone}}</view>
				<!-- <view>
					备注信息：XXXXXXXXXXXXXX
					XXXXXXXX
				</view> -->
			</view>
			
			<!-- <view class="xq-wxzt" v-if="info.repair_status == 0">
				<view class="name">
					维修状态<text>*</text>
				</view>
				<view class="wxzt-type" @click="showType = true">
					<text>{{repair_text}}</text>
					<image style="width: 10rpx;height: 18rpx;" src="https://s1.ax1x.com/2022/11/18/znVCxe.png" mode="">
					</image>
				</view>
			</view>
			<view class="xq-beizhu" v-if="info.repair_status == 0">
				<view class="name">
					备注信息：
				</view>
				<textarea v-model="repair_message" placeholder="请描述维修信息" name="" id="" cols="30" rows="10"></textarea>
			</view>
			<view class="xq-beizhu" style="padding-bottom: 30rpx;" v-if="info.repair_status == 0">
				<view class="name">
					上传维修图片：
				</view>
				<u-upload :action="action" ref="uUpload" width="160rpx" height="160rpx"></u-upload>
			</view>
			 -->
			
			<!-- <block v-if="info.repair_status != 0 && info.repair_status != -1"> -->
				<view class="xq-wxzt">
					<view class="name">
						维修状态
					</view>
					<view class="wxzt-type">
						<text class="type" v-if="info.repair_status == -1">待派单</text>
						<text class="type" style="color: #0055B0;" v-if="info.repair_status == 0">维修中</text>
						<text class="type" style="color: #E60012;" v-if="info.repair_status == 1">待确认</text>
						<text class="type" v-if="info.repair_status == 2">无法维修</text>
						<text class="type" style="color: #7C7C7C;" v-if="info.repair_status == 3">已完成</text>
					</view>
				</view>
				<view class="xq-beizhu"
					style="border-bottom: 1px solid #EAEAEA;padding: 0;margin: 0 20rpx; margin-top: 30rpx;">
					<view class="name">
						备注信息：{{ info.repair_message }}
					</view>
				</view>
				<view class="xq-beizhu" style="padding-bottom: 30rpx;">
					<view class="name">
						维修图片：
					</view>
					<u-upload ref="uUpload" :deletable="false" :show-progress="false" width="518rpx" height="684rpx"
						:max-count="repair_images.length" :file-list="repair_images"></u-upload>
				</view>
		</view>
		
		
		
		<button class="u-reset-button btn-moren" v-if="wx_status == 1" @click="showorder">去审核</button>
			<u-modal v-model="showOrder" :title="title" :content='content' :mask-close-able="true" show-cancel-button 
			@cancel="order_qx" @confirm="order_confirm">
				<view style="margin-left: 130rpx;">
				<u-radio-group v-model="value" @change="radioGroupChange">
							<u-radio 
								@change="radioChange" 
								v-for="(item, index) in list" :key="index" 
								:value="item.id"
								:name="item.name"
								:disabled="item.disabled"
							>
								{{item.name}}
							</u-radio>
						</u-radio-group>
				</view>
				<view v-if="from.check_status == 1" style="margin-top: 50rpx;
				margin-left: 20rpx; margin-right: 20rpx; padding: 30rpx;
				border: 3rpx solid #dadada;border-radius: 10rpx;">
					<textarea v-model="from.check_fail_message"  placeholder="请输入原因"></textarea>
				</view>
				
				
			</u-modal>
		

		<u-select v-model="showType" :list="list" @confirm="confirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showOrder:false,
				title:'提示',
				content:'',
				
				list: [
					{
						id:1,
						name: '审核通过',
						disabled: false
					},
					{
						id:2,
						name: '审核不通过',
						disabled: false
					},			
						],
							// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '',
				
				
				from:{
					id:'',
					check_status:'',
					check_fail_message:'',		
				},
				
				
				id: '',
				info: null,
				fileList: [],
				showType: false,
				repair_status: 1,
				// repair_text: '维修完成',
				// action: this.$IMG_URL + '/index/ajax/upload',
				repair_message: '',
				repair_images: [],
				index: 0,
				wx_status_name:'',
				wx_status:''
			}
		},
		onLoad(e) {
			this.id = e.id
			this.index = e.index
			this.wx_status_name = e.wx_status_name
			this.wx_status = e.wx_status
			if (uni.getStorageSync('headToken')) {
				this.getOrderXq()
			} else {
				uni.showModal({
					title: '温馨提示',
					content: '请先登录',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '../../login/login'
							})
						} else if (res.cancel) {
							uni.switchTab({
								url: '/pages/user/index/index'
							})
						}
					}
				});
			}

		},
		methods: {
			
			// 选中某个单选框时，由radio时触发
					radioChange(e) {
						 //console.log(e);
						 if(e == '审核通过'){
							 this.from.check_status = 2
							 
						 }else{
							 this.from.check_status = 1
						 }
					},
					// 选中任一radio时，由radio-group触发
					radioGroupChange(e) {
						// console.log(e);
					},
			
			
			//  获取订单详情
			getOrderXq() {
				this.$u.post('/admin/order_detail', {
					id: this.id
				}).then(res => {
					
					res.data.logo_image = this.$IMG_URL + res.data.logo_image
					this.info = res.data
					this.fileList = []
					res.data.report_images.forEach(item => {
						this.fileList.push({
							url: this.$IMG_URL + item
						})
					})
					this.repair_images = []
					
					res.data.repair_images.forEach(item => {
						this.repair_images.push({
							url: this.$IMG_URL + item
						})
					})
				})
			},
			confirm(e) {
				//console.log('1', e)
				this.repair_status = e[0].value
				this.repair_text = e[0].label
			},
			showorder(){
			//console.log(121212)	
			this.showOrder=true
			//console.log(this.showOrder)
			},
			order_qx(){
				
				this.from.id = ''
				this.from.check_status = ''
				this.from.check_fail_message = ''
				this.value =''
				//console.log(JSON.stringify(this.from))
			},
			// 提交维修信息
			order_confirm() {
				
				
				if(this.from.check_status == 1){
					if(this.from.check_fail_message == ''){
						uni.showToast({
							icon:'none',
							title:'请输入原因'
						})
						this.from.id = ''
						this.from.check_status = ''
						this.from.check_fail_message = ''
						this.value =''
						return
					}
					
					
					
				}
				
				this.from.id =this.id
				
				// console.log(JSON.stringify(this.from))
				this.$u.post('/admin/order_confirm',{
						...this.from
					}).then(res =>{
						this.from.id = ''
						this.from.check_status = ''
						this.from.check_fail_message = ''
						this.value =''
						uni.showToast({
							icon:'success',
							title:'提交成功'
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1,
								success: function (e) {
								    var page = getCurrentPages().pop();
								     if (page == undefined || page == null) return;
								        page.onLoad();
								      }
							})
						},800)
					})
				},
			
			//============
		}
	}
</script>

<style lang="less">
	.xq-box {
		border-radius: 20rpx;
		background: #fff;
		margin-bottom: 20rpx;
	}

	.xq-nr {
		padding: 40rpx 20rpx;
		line-height: 73rpx;
		font-size: 34rpx;
		padding-bottom: 34rpx;
	}

	.xq-title {
		height: 130rpx;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #F7F7F9;
		padding: 0 20rpx;
		justify-content: space-between;
	}

	.xq-btn {
		font-size: 38rpx;
		padding: 40rpx 20rpx;
		border-top: 1px solid #F7F7F9;
		line-height: 64rpx;
	}

	.title {
		font-size: 38rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.goods-image {
	    width: 200rpx;
	    height: 200rpx;
		// background: #A0A0A0;
		border-radius: 10rpx;
		flex-shrink: 0;
	}

	.goods-xq {
		margin-left: 24rpx;
		padding-top: 9rpx;

		text {
			display: block;
		}

		.goods-title {
			font-size: 60rpx;
			font-weight: bold;
			margin-bottom: 15rpx;
		}

		.goods-des {
			font-size: 24rpx;
			color: #7C7C7C;
			line-height: 30rpx;
			margin-bottom: 37rpx;
		}

		.goods-price {
			font-size: 40rpx;
			color: #E60012;
			font-weight: bold;
		}
	}

	.xq-wxzt {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 20rpx;
		height: 106rpx;
		border-top: 1px solid #EAEAEA;
		border-bottom: 1px solid #EAEAEA;

		.name {
			font-size: 34rpx;
			font-weight: 500;

			text {
				color: #E60012;
			}
		}

		.wxzt-type {
			display: flex;
			align-items: center;

			text {
				font-size: 32rpx;
				color: #303133;
				margin-right: 21rpx;
			}
		}
	}

	.xq-beizhu {
		padding: 0 20rpx;
		padding-top: 30rpx;

		.name {
			font-size: 34rpx;
			font-weight: 500;
			padding-bottom: 30rpx;
		}

		textarea {
			width: 100%;
			height: 150rpx;
			border-bottom: 1px solid #EAEAEA;
		}
	}

	/deep/ .u-list-item {
		margin-left: 0 !important;
	}

	.content {
		padding-bottom: 60rpx;
	}
	
	//=====
	
	

	
</style>
